/*
 * @Author: lxy
 * @Date: 2022-03-29 13:39:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-30 09:55:57
 * @FilePath: \第四阶段\ERP\erp-management-system\src\views\customerManage\CustomerStatus.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
 */
import React, { useState } from 'react'
import { Row, Col, Button } from 'antd';
export default function CustomerStatus() {
  const [currentBtn, setcurrentBtn] = useState(0);
  const [currentRank, setcurrentRank] = useState(0);
  const [rankRule, setrankRule] = useState([
    '编号 升序↑', '录入时间 升序↑', '更新时间 升序↑'
  ]);
  const [CustomerClass, setCustomerClass] = useState([
    { cstatus: '已成交', num: 0 },
    { cstatus: '等待打款', num: 2 },
    { cstatus: '确定细节', num: 4 },
    { cstatus: '有意向', num: 1 },
    { cstatus: '潜在客户', num: 6 },
  ]);
  return (
    <div>
      <Row>
        <Col span={8} >
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            {
              CustomerClass.map((item, index) => (
                <Button type={index == currentBtn ? 'primary' : ''} key={index} onClick={() => { setcurrentBtn(index) }} >{item.cstatus}({item.num})</Button>
              ))
            }
          </div>
        </Col>
        <Col span={6} >
          <div style={{ display: 'flex', justifyContent: 'space-around', marginLeft: '20px' }}>
            {
              rankRule.map((item, index) => (
                <Button danger key={index} type={index == currentRank ? 'primary' : ''}  onClick={() => { setcurrentRank(index) }} >{item}</Button>
              ))
            }
          </div>
        </Col>
        <Col span={9} style={{ height: '27px', lineHeight: '27px', textAlign: 'right' }}><span>客户数量限制：</span><span className='font-color-red'>7</span><span className='font-color-red'>/ 无限制</span>   </Col>
      </Row >
    </div >
  )
}
